<template>
  <div class="app-container">
    <el-button class="lgm-reset-btn" @click="goBack">返回</el-button>

    <div class="content">
      <div class="lgm-search">
        <el-form
          ref="form"
          :model="searchParams"
          label-width="80px"
          class="search-form"
        >
          <el-form-item label="扫菲日期">
            <el-date-picker
              v-model="searchParams.time1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="名称">
            <el-input
              v-model="searchParams.nickname"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>

          <el-row>
            <el-button
              type="success"
              class="lgm-search-btn"
              icon="el-icon-search"
              @click="piecework_wage_detailFn"
              >搜索</el-button
            >
            <el-button
              class="lgm-reset-btn"
              icon="el-icon-refresh"
              @click="reset"
              >重置</el-button
            >
            <!-- <el-button type="success">
              <el-image
                :src="require('@/assets/images/export.png')"
                class="export-icon"
              ></el-image>
              导出
            </el-button> -->
          </el-row>
        </el-form>
      </div>
    </div>

    <div class="content">
      <div class="table-header-btn">
        <el-button type="success" size="small" @click="settlementFn"
          >批量结算</el-button
        >
        <el-button type="warning" size="small" @click="nosettlementFn"
          >批量取消结算</el-button
        >
      </div>
      <div class="table">
        <el-table
          :data="dataList"
          border
          ref="multipleTable"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="nickname"
            label="姓名"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="bundle_no"
            label="扎号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="bundle_number"
            label="捆数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="color_name"
            label="颜色"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="size_name"
            label="尺码"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="num"
            label="数量"
            align="center"
          ></el-table-column>
          <el-table-column prop="is_settle" label="是否结算" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.is_settle == 1 ? "是" : "否" }}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column
              prop="department_name"
              label="部门名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="position_name"
              label="岗位名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="style_name"
              label="款式名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="bed_name"
              label="床次"
              align="center"
            ></el-table-column> -->
          <el-table-column prop="is_settle" label="是否收货" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.is_receive == 1 ? "是" : "否" }}</div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <div class="flex">
                <el-button
                  size="mini"
                  type="warning"
                  plain
                  @click="settlementFn(scope.row)"
                  >结算</el-button
                >
                <el-button
                  size="mini"
                  type="info"
                  plain
                  @click="nosettlementFn(scope.row)"
                  >取消结算</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="lgm-page-wrap">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :page-sizes="[10, 100, 200, 300, 400]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  piecework_wage_detail,
  settlement,
  compensationstatic,
  nosettlement,
} from "@/api/admin";

import SelectBed from "@/components/SelectBed";
import SelectStyle from "@/components/SelectStyle";

export default {
  name: "PieceSalary",
  components: {
    "select-bed": SelectBed,
    "select-style": SelectStyle,
  },
  data() {
    return {
      detail: {},

      page: 1,
      page_size: 10,
      total: 0,
      searchParams: {
        nickname: "",
        time1: "",
      },
      totalNum: 0, // 总件数
      totalMoney: 0, // 总金额
      yjs: 0, // 已结算
      wjs: 0, // 未结算

      departmentList: [],
      dataList: [],
      selectedIds: [], // 用来存储选中的id
    };
  },
  mounted() {
    this.piecework_wage_detailFn();
    this.compensationstaticFn();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    handleSizeChange(value) {
      this.page_size = value;
      this.piecework_wage_detailFn();
    },
    handleCurrentChange(value) {
      this.page = value;
      this.piecework_wage_detailFn();
    },
    goDetail(id) {
      this.$router.push("/piece-salary-detail?id=" + id);
    },
    compensationstaticFn() {
      compensationstatic({}, "GET").then((e) => {
        this.detail = e.data;
      });
    },
    // 结算
    settlementFn(e) {
      let ids = [];
      if (e && e.id) {
        ids = [e.id];
      } else {
        if (this.selectedIds.length === 0) {
          this.$message.warning("请选择要结算的项");

          return;
        }
        ids = this.selectedIds;
      }

      settlement({
        ids,
      }).then((e) => {
        this.piecework_wage_detailFn();
        this.$message.success("结算成功");

      });
    },
    // 取消结算
    nosettlementFn(e) {
      let ids = [];
      if (e&& e.id) {
        ids = [e.id];
      } else {
        if (this.selectedIds.length === 0) {
          this.$message.warning("请选择要取消结算的项");
          return;
        }
        ids = this.selectedIds;
      }
      nosettlement({
        ids,
      }).then((e) => {
        this.piecework_wage_detailFn();
        this.$message.success("取消结算成功");

      });
    },
    reset() {
      for (let i in this.searchParams) {
        this.searchParams[i] = null;
      }
      this.piecework_wage_detailFn();
    },
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0"); // 月份从0开始
      const day = String(d.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    piecework_wage_detailFn() {
      let obj = this.searchParams;
      if (this.searchParams.time1) {
        obj["start"] = this.formatDate(this.searchParams.time1[0]);
        obj["end"] = this.formatDate(this.searchParams.time1[1]);
      }
      delete obj.time1;

      piecework_wage_detail(
        {
          page: this.page,
          page_size: this.page_size,
          ...obj,
        },
        "get",
        this.$route.query.id
      ).then((e) => {
        this.dataList = e.data.list;
        this.total = e.data.total;
      });
    },
    handleSelectionChange(val) {
      // 更新选中的ID数组
      this.selectedIds = val.map((item) => item.id);
      console.log(this.selectedIds);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.app-container {
  .content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
  }

  .info {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;

    .item {
      font-size: 14px;
      display: flex;
      align-items: center;

      span {
        color: #000;
        font-size: 22px;
        font-weight: 700;
        margin-left: 5px;
      }
    }
  }

  .tips {
    color: #999;
  }

  .table {
    .flex {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;

      ::v-deep button {
        margin: 0;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
